<template>
  <Modal v-model="bindDiscordPop" width="32" :closable="false" :mask-closable="false"
    class-name="vertical-center-modal">
    <div slot="header" class="head-sty">
      <div class="title">绑定 Discord 账号</div>
      <Icon type="md-close" class="close" @click="closeMet()" />
    </div>
    <div class="content-sty">
      <div class="label-text">复制下方字符串，填写到 <span class="sep-text">“XXXXX”</span> 频道内进行验证</div>
      <div class="code-sty">
        <div class="code-link">
          <div class="code">2ASAN3992NNASAD92DASA</div>
        </div>
        <!-- <div class="time">
          <img src="@/assets/images/user/copy.png" class="copy" alt="">
          复制并前往
        </div> -->
        <Button type="primary" class="confirm-btn">我已验证</Button>
      </div>
      <div class="verification-info">有效期：60s</div>
    </div>
    <div slot="footer">

    </div>
  </Modal>
</template>
<script>
import { mapState } from "vuex";
import { debounce } from "@/common/common";

export default {
  data() {
    return {
      bindDiscordPop: false,
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    open() {
      this.bindDiscordPop = true;

    },
    closeMet() {
      this.bindDiscordPop = false;
    },
    confirmMet() {

    }
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-header) {
  border: none;
  padding: 32px 32px;
}

:deep(.ivu-modal-body) {
  padding: 8px 32px;
}

:deep(.ivu-modal-footer) {
  border: none;
  padding: 0;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .head-sty {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-weight: 600;
      font-size: 24px;
      color: #1E1714;
      line-height: 28px;
    }

    .close {
      color: #1E1714;
      font-size: 36px;
      font-weight: 500;
      cursor: pointer;
    }
  }

  .content-sty {
    .label-text {
      font-weight: 400;
      font-size: 20px;
      color: #767B93;
      line-height: 23px;
      margin-bottom: 20px;

      .sep-text {
        color: #FF186B;
      }
    }

    .code-sty {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .code-link {
        min-width: 317px;
        height: 60px;
        background: #F5F6FA;
        border-radius: 8px 8px 8px 8px;
        padding: 0 24px;

        .code {
          font-weight: 500;
          font-size: 20px;
          color: #1E1714;
          line-height: 60px;
        }
      }

      .time {
        min-width: 196px;
        height: 60px;
        background: #1E1714;
        border-radius: 8px 8px 8px 8px;
        padding: 0 24px;
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 60px;
        display: inline-flex;
        align-items: center;
        gap: 8px;

        .copy {
          width: 20px;
          height: 20px;
        }
      }

      .confirm-btn {
        min-width: 196px;
        height: 60px;
        background-color: #FF186B;
        font-weight: 500;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 23px;
      }
    }

    .verification-info {
      font-weight: 400;
      font-size: 20px;
      color: #AEB0B9;
      line-height: 38px;
      margin-top: 16px;
      margin-bottom: 24px;
    }

    .notice-text {
      font-weight: 500;
      font-size: 18px;
      color: #1E1714;
      line-height: 21px;
    }

    :deep(.ivu-input-group) {
      .ivu-input {
        height: 54px;
      }

      .ivu-input-group-append {
        height: 54px;
        font-weight: 600;
        font-size: 20px;
        color: #1E1714;
        line-height: 26px;
      }
    }
  }
}
</style>
